﻿<%@ Page Title="" Language="C#" MasterPageFile="Site.Master" AutoEventWireup="true" CodeBehind="AdminPlano.aspx.cs" Inherits="Smart_House_System.Formulario_web1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2 id="myH2" style="margin-top:8%;width:99%;">
        Configurar Plano.
    </h2>
        <div class="accordionHeader">Configurar Plano</div>
<asp:Panel ID="AccordionPane2" runat="server" CssClass="accordionContent">   
        <table style="width: 100%;"  >
            <tr><td>&nbsp;</td></tr>
            <tr >
                <td style="text-align:right; width:5%">
                    &nbsp;
                    Cedula</td>
                <td style="text-align:left; width:75%">
                    <asp:TextBox ID="txtCedula" runat="server" CssClass="myText" MaxLength="8"></asp:TextBox>
                    &nbsp;  
                    <asp:Button ID="btnBuscar" runat="server" Text=""  CssClass="btnBuscarUsu" 
                        onclick="btnBuscar_Click" OnClientClick="pruebaAl()" />
                    &nbsp;      
                    <asp:RequiredFieldValidator ID="rfvCedula" runat="server" 
                        ControlToValidate="txtCedula" ErrorMessage="*Cedula - Campo obligatorio" ForeColor="Red" ></asp:RequiredFieldValidator>
                     &nbsp;  
                    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"  ControlToValidate="txtCedula" ValidationExpression="([Z0-9]{8,30})$" 
                        ErrorMessage="El campo debe contener 8 números"  ForeColor="Red"></asp:RegularExpressionValidator>

                </td>
            </tr>
            <tr>
                <td style="text-align:right; width:5%;">
                    &nbsp;</td>
                <td  style="text-align:left; width:75%">
                    <div >
                       <asp:Label ID="lblCasa" runat="server" Text="Id Casa" Visible="false"></asp:Label>
                       <select id="cmbCasas" class="styled-select" style="width:300px" runat="server" Visible="false" onchange="ChooseCasa()">
                       </select>
                        <asp:Label ID="lblIdPlano" runat="server" Text="Id Plano" Visible="false"></asp:Label>
                       <select id="cmbUsu" class="styled-select" runat="server" visible="false" onchange="ChoosePlano()">
                       </select>
                        <asp:Label ID="lblPregunta" runat="server" Text="que objeto desea agregar?" Visible="false"></asp:Label>
                        <select id="ddlElementos" name="ddlElementos" onchange="Seleccionar()" runat="server" visible="false" >
                            <option value="0">Debe seleccionar</option>
                            <option value="1">Camara</option>
                            <option value="2">Luz</option>
                            <option value="3">Sensor</option>
                        </select>
                        <asp:Button ID="btnGuardarConf" runat="server" CssClass="btnGuardar" 
                            onclick="btnGuardarConf_Click" Text="Aplicar" Height="33px"  
                            Visible="false" Width="174px"/>
                        <div id="makeMeDraggable" style="z-index:2; background-repeat:no-repeat; background-size:100% 100%; "> 
                            <img id="objetoImg" alt="" src="" onclick="ObtenerPosPlano()" style="filter:alpha(opacity=50); opacity:100;"/> 
                        </div>
                    </div>
                </td>
            </tr>
<%--            <tr>
                <td style="text-align:right; width:25%;">&nbsp;</td>
                <td  style="text-align:left; width:75%">&nbsp;

                </td>
            </tr>--%>
        </table>
        </asp:Panel>
        <div style="width:100%; text-align:center;">
            <asp:Label ID="lblMensaje" runat="server" Text="" Font-Size="Larger" ForeColor="Red"></asp:Label>
        </div>
        <asp:Button ID="btnAux3" runat="server" Text="" Width="0px" Height="0px" 
            CssClass="esconderBtn" onclick="btnAux3_Click"  />
        <asp:Button ID="btnAux2" runat="server" Text="" Width="0px" Height="0px" 
            CssClass="esconderBtn" onclick="btnAux2_Click"  />
    <div id="makeMeDroppable" >
        <img id="imgPlano" alt="" src="" style="background-color:Blue; 
            background-repeat:no-repeat;background-size:100% 100%;top:50%;z-index:1;height:90%;width:100%;" runat="server"/>
    </div>
     <%-- 
    <input type="hidden" id="miInput" runat="server" style="top:50%;"/>
    <input type="hidden" id="miInput2" runat="server" style="top:50%;"/>
   <asp:Button ID="btnPosicion" runat="server" Text=" " onclick="btnPosicion_Click" CssClass="esconderBtn" />
   --%>

    <script type="text/javascript">

        $(document).ready(function () {
            $('#makeMeDraggable').draggable({
                containtment: '#makeMeDroppable',
                snap: '#makeMeDroppable',
                cursor: 'move'
            });
        });

        $(document).ready(function () {
            getObjects();
        });

        function getObjects() {
            $('#makeMeDraggable div').empty();
            var smensaje = $('#MainContent_cmbUsu').find('option:selected').text();
            var dataString = "{ 'message' : '" + smensaje + "'}";
            $.ajax({
                type: 'POST', //Tipo de peticiòn
                url: 'AdminPlano.aspx/getObjects', // Url y metodo que se invoca
                data: dataString, //Necesario cuando queremos mandar algun parametro
                contentType: 'application/json; charset=utf-8',
                dataType: 'json', //Tipo de dato con el que se realiza la llamada
                success: function (response) {
                    var miArray = response.d.split("-");
                    var aux = 0;
                    for (var i = 0; i < miArray.length; i++) {
                        var miArrayAux = miArray[i];
                        var miArray2 = miArrayAux.split("/");
                        var tipoObj = 0;
                        var idObj = 0;
                        var alto = 0;
                        var ancho = 0;
                        var res = 0;
                        for (var i2 = 0; i2 < miArray2.length; i2++) {
                            aux = aux + 1;

                            switch (i2) {
                                case 1:
                                    idObj = miArray2[i2].toString();
                                    break;
                                case 2:
                                    alto = miArray2[i2].toString();
                                    break;
                                case 3:
                                    ancho = miArray2[i2].toString();
                                    break;
                                case 0:
                                    tipoObj = miArray2[i2].toString();
                                    break;
                            }
                        }
                        if ($('#MainContent_cmbUsu').is(":visible")) {
                            var altoN = alto.replace(",", ".");
                            var anchoN = ancho.replace(",", ".");
                            posicinarObj(tipoObj, idObj, altoN, anchoN);
                        }
                    }
                }
            });
            return false;
        }

        function posicinarObj(tipoObj, idObj, ancho, alto) {
            if (tipoObj == 1) {
                var altoAux = (90 - alto);
                $('<div  id="cam' + idObj + '"' + ' style="left:' + ancho + '%; bottom:' + altoAux + '%;background-repeat:no-repeat;background-image:url(../Imagenes/camara.jpg);position:absolute;width:5%;height:8%;position:absolute;"' + 'onclick="eliminarObj(this.id)"></div>').appendTo("#makeMeDroppable");
            }
            if (tipoObj == 2) {
                var altoAux2 = (90 - alto);
                $('<div id="lamp' + idObj + '"' + ' style="left:' + ancho + '%; bottom:' + altoAux2 + '%;background-repeat:no-repeat;background-image:url(../Imagenes/lamp.jpg);position:absolute;width:5%;height:8%;position:absolute;"' + 'onclick="eliminarObj(this.id)"></div>').appendTo("#makeMeDroppable");
            }
            if (tipoObj == 3) {
                var altoAux3 = (90 - alto);
                $('<div id="sensor' + idObj + '"' + ' style="left:' + ancho + '%; bottom:' + altoAux3 + '%;background-repeat:no-repeat;background-image:url(../Imagenes/sensor_prendido.jpg);position:absolute;width:5%;height:8%;position:absolute;"' + 'onclick="eliminarObj(this.id)"></div>').appendTo("#makeMeDroppable");
            }
            document.getElementById('objetoImg').src = "../Imagenes/pregunta.jpg";
            document.getElementById('objetoImg').style.opacity = "0.5";


        }

        function actualizarEstado(idObj, estado) {
            myO = $('#' + idObj);
            if (estado == "True") {
                myO.css("background-image", "url(../Imagenes/sensor_apagado.jpg)");
            } else {
                myO.css("background-image", "url(../Imagenes/sensor_prendido.jpg)");
            }
        }

        function Seleccionar() {
            var indice = MainContent_ddlElementos.selectedIndex;
            var valor = MainContent_ddlElementos.options[MainContent_ddlElementos.selectedIndex].text;
            if (MainContent_cmbUsu.selectedIndex == 0)
            {
                alert("Debe seleccionar un Plano.");
                MainContent_ddlElementos.selectedIndex = 0;
            }
            else
            {
                switch (indice) {
                    case 1:
                        document.getElementById('objetoImg').src = "../Imagenes/camara.jpg"; 
                        document.getElementById('objetoImg').style.opacity = "100";
                        break;
                    case 2:
                        document.getElementById('objetoImg').src = "../Imagenes/lamp.jpg";
                        document.getElementById('objetoImg').style.opacity = "100";
                        break;
                    case 3:
                        document.getElementById('objetoImg').src = "../Imagenes/sensor_prendido.jpg";
                        document.getElementById('objetoImg').style.opacity = "100";
                        break;
                    case 0:
                        alert("Debe seleccionar una opcion valida.");
                        document.getElementById('objetoImg').src = "../Imagenes/pregunta.jpg";
                        document.getElementById('objetoImg').style.opacity = "0.5";
                        break;
                }
            }
          }

          function ObtenerPosPlano() {
              var plano = document.getElementById("makeMeDroppable");
              var obj = document.getElementById("makeMeDraggable");

              var xx2 = window.innerWidth;

              var a1 = plano.offsetTop;
              var b1 = obj.offsetTop;
              var c1 = document.getElementById("makeMeDroppable").offsetHeight;
              var porcTop = ((b1 - a1) / c1) * 100;

              var porcLeftPlano = (100 * plano.offsetLeft) / xx2;
              var aux = obj.offsetLeft + plano.offsetLeft;

              var porcLeftObj = (100 * (aux)) / xx2;
              var porcLeft = porcLeftObj;  - porcLeftPlano;

              if (porcLeft > 50) {
                  porcLeft = porcLeftObj + porcLeftPlano;
              }

              var extraData = "";

              if (MainContent_ddlElementos.selectedIndex == 1) {
                  var rtpsCam = window.prompt("Ingresar dirección RTPS de la Camara.", " ");
                  while (rtpsCam == null || rtpsCam == "" || rtpsCam == " ") {
                      rtpsCam = window.prompt("Ingresar dirección RTPS.", " ");
                  }
                  extraData = rtpsCam;
              } else if (MainContent_ddlElementos.selectedIndex == 2) {
                  var idLuz = window.prompt("Ingresar id de la Luz.", " ");
                  while (idLuz == null || idLuz == "" || idLuz == " " ) {
                      idLuz = window.prompt("Ingresar id de la Luz.", " ");
                  }
                  extraData = idLuz;
              } else if (MainContent_ddlElementos.selectedIndex == 3) {
                  var idSensor = window.prompt("Ingresar id del Sensor.", " ");
                  while (idSensor == null || idSensor == "" || idSensor == " ") {
                      idSensor = window.prompt("Ingresar id del Sensor.", " ");
                  }
                  extraData = idSensor;
              }
              modo = 1;
              posicionarObj(porcTop + "/" + porcLeft + "/" + MainContent_ddlElementos.selectedIndex + "/" + extraData,modo);
              getObjects();
          }

          function posicionarObj(smensaje,modo) {
              var dataString = "{ 'message' : '" + smensaje + "', message2 : '" + modo + "', message3 : '" + $('#MainContent_cmbUsu').find('option:selected').text() + "|"+ $('#MainContent_cmbUsu').find('option:selected').val()  + "'}";

              $.ajax({
                  type: 'POST', //Tipo de peticiòn
                  url: 'AdminPlano.aspx/posicionarObj', // Url y metodo que se invoca
                  data: dataString, //Necesario cuando queremos mandar algun parametro
                  contentType: 'application/json; charset=utf-8',
                  dataType: 'json', //Tipo de dato con el que se realiza la llamada
                  success: function (response) {
                      MainContent_ddlElementos.selectedIndex = 0;
                      alert(response.d);
                  }
              });
              return false;
          }

          function eliminarObj(id) {
              if (confirm('Seguro que desea eliminar el elemento ' + id + ' seleccionado?')) {
                  modo = 2;
                  posicionarObj(id, modo);
              }
          }


          $('#MainContent_cmbUsu').change(function () {
              var $selectedOption = $(this).find('option:selected');
              var selectedLabel = $selectedOption.text();
              var selectedValue = $selectedOption.val();

              var miArray = selectedValue.split("@");
              var foto = "";
              for (var i = 0; i < miArray.length; i++) {
                  if (i == 0) {
                      foto = miArray[i].toString();
                  }
              }
              document.getElementById('MainContent_imgPlano').src = foto;
          });


          function ChoosePlano() {
              getObjects();
              $('#<%=btnAux2.ClientID %>').click();
          }

        function ChooseCasa() {
            $('#<%=btnAux3.ClientID %>').click();
        }
    </script>

</asp:Content>